<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为菜单导航</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
		</script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="menu">

			<ul>

				<li> <a herf="#" class="title"> 手机</a>
					<br><a href="#" class="f2"> 荣耀</a>
					<a href="#" class="f2">HUAWEI P系列</a>

					<div class="p1">
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
						</ul>
						<ul>
							<li class="li-all">
								<a href="#" class="a-all">
									查看全部
								</a>
							</li>
						</ul>



					</div>
				</li>


				<li> <a herf="#" class="title">笔记本 & 平板</a> <span></span>
					<br><a href="#" class="f2">平板电脑</a>
					<a href="#" class="f2">笔记本电脑</a>
					<div class="p2">
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li class="li-all">
								<a href="#" class="a-all">
									查看全部
								</a>
							</li>
						</ul>



					</div>
				</li>


				<li> <a herf="#" class="title">智能穿戴</a> <span></span>
					<br><a href="#" class="f2">手环</a>
					<a href="#" class="f2">手表</a>
					<a href="#" class="f2">VR</a>
					<div class="p2">
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
						</ul>



					</div>
				</li>


				<li> <a herf="#" class="title">智能家居 & 智慧屏</a> <span></span>
					<br><a href="#" class="f2">智慧屏</a>
					<a href="#" class="f2">路由器</a>
					<a href="#" class="f2">照明</a>
					<div class="p3">
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
						</ul>



					</div>
				</li>


				<li>
					<a herf="#" class="title">

					</a>
					<span>
					</span>
					<br>
					<a href="#" class="f2">保护壳</a>
					<a href="#" class="f2">移动电源</a>
					<a href="#" class="f2">耳机</a>
					<div class="p3">
						<ul>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="#" />
									<span>荣耀</span>
								</a>
							</li>
						</ul>
					</div>
				</li>



				<li> <a herf="#" class="title">增值服务 & 其他</a> <span></span>
					<br><a href="#" class="f2">服务器</a>
					<a href="#" class="f2">增值卡</a>
					<div class="p4">
						<ul>
							
							<!-- <li class="li-all">
								<a href="#" class="a-all">
									查看全部
								</a>
							</li> -->
						</ul>



					</div>
				</li>




			</ul>

		</div>
		<!-- 菜单导航栏数据 -->



	
		<script>
			
			var model = $.ajax({
				url: 'http://192.168.43.236:8080/type/%E6%99%BA%E8%83%BD%E7%A9%BF%E6%88%B4',
				success: function() {
				var	menu1 = JSON.parse(model.responseText);
					// console.log(menu.typeInfo);

					for (let item of menu1) {
						// console.log(menu);
						console.log(item.typeId);
						console.log(item.typeInfo);
						console.log(menu1);



					}
					
					liMaker(menu1.length);
					aMaker(menu1);



				},
			});

			function liMaker(time) {
				for (var i = 0; i < time; i++) {
					var ment =`
					<li>
						<a href =""
					class= "x" >
						<img />
						<span> </span> </a> 
						</li>
					`
					$(".p4  ul").append(ment);
						
					
					



				}

			}
			function aMaker(menu){
				for(var i=0;i< menu.length;i++){
					$(".p4 ul li a img").eq(i).attr("src" ,menu[i].typeThumbail);
					$(".p4 ul li a span").eq(i).text(menu[i].typeInfo);
				}
				
			}
			function 
			
			
			
			
		</script>
		
		
		
		<!-- <script type = "text/javascript">
		new Vue({
		  el: '#app',
		  data () {
		    return {
		      info: null
		    }
		  },
		  mounted () {
		  axios.get('http://192.168.43.236:8080/type/%E6%99%BA%E8%83%BD%E7%A9%BF%E6%88%B4', {
		      params: {
		        ID: 12345
		      }
		    })
		    .then(function (response) {
				this.info=response.data;
		      console.log(info);
		    })
		    .catch(function (error) {
		      console.log(error);
		    });
		  }
		})
		</script> -->
	</body>
</html>
